<!--首页功能区-->
<template>
  <div class="features">
    <div class="scroll" :style="{ width: w + 'vw' }">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span :class="['iconfont', item.icon]"></span>
        <span class="name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      w: null,
      list: [
        {
          icon: "icon-rili-shi",
          name: "每日推荐",
        },
        {
          icon: "icon-FM_weixuanze",
          name: "私人FM",
        },
        {
          icon: "icon-yinlegedanyinfu",
          name: "歌单",
        },
        {
          icon: "icon-paixingbang",
          name: "排行榜",
        },
        {
          icon: "icon-zhuanji",
          name: "数字专辑",
        },
        {
          icon: "icon-diantai",
          name: "电台",
        }
      ],
    };
  },
  created() {
    this.w = this.list.length * 19;
  },
};
</script>

<style lang="less" scoped>
.features::-webkit-scrollbar {
  display: none;
}
.features {
  padding: 2.666vw 0;
  overflow-x: scroll;
  border-bottom: 1px solid #f8faf7;
  background: #fff;
  .scroll {
    display: flex;
  }
  .item {
    text-align: center;
    width: 19vw;
    .name {
      font-size: 12px;
      color: #434142;
    }
  }
}
.iconfont {
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 26px;
  border-radius: 50%;
  margin: 0 auto;
  background: linear-gradient(90deg, #fd6155, #ff1f0f);
  margin-bottom: 5px;
}
</style>